<template>
  <!-- <div class="promotionGood" v-if="benefit.length > 0">
    <router-link
      :to="{ path: '/detail/' + item.id }"
      class="item acea-row row-between-wrapper"
      v-for="(item, index) in benefit"
      :key="index"
    >
      <div class="pictrue">
        <img :src="item.image" class="image" />
      </div>
      <div class="text">
        <div class="name line1">{{ item.store_name }}</div>
        <div class="sp-money acea-row">
          <div class="moneyCon">
            促销价: ￥<span class="num">{{ item.price }}</span>
          </div>
        </div>
        <div class="acea-row row-between-wrapper">
          <div class="money">日常价：￥{{ item.ot_price }}</div>
          <div>仅剩：{{ item.stock }}{{ item.unit_name }}</div>
        </div>
      </div>
    </router-link>
  </div> -->

  <div class="p-promotionGood acea-row row-between-wrapper">
      <!-- <router-link
      :to="{ path: '/detail/' + item.id }"
      v-for="(item, index) in benefit"
      :key="index"
    > -->
    <div class="p-item acea-row row-between-wrapper"  v-for="(item, index) in benefit"  :key="index">
      <div class="p-image">
          <router-link :to="{ path: '/detail/' + item.id }">
            <img :src="item.image" class="p-image" />
          </router-link>
      </div>
      <div class="p-bd ">
        <span class="p-tag">好货内部价</span>
        <router-link :to="{ path: '/detail/' + item.id }">
          <div class="p-name">{{ item.store_name }}</div>
        </router-link>
        <div class="p-price">
             ￥{{ item.price }} <span class="p-ot">￥{{ item.ot_price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PromotionGood",
  props: {
    benefit: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {};
  }
};
</script>
<style scoped>
  .p-promotionGood {
    width: 1100px;
  }
  .p-promotionGood .p-item {
    width: 540px;
    height: 200px;
    margin: 0 0px 10px 0;
    background-color: #ffffff;
  }
  .p-promotionGood .p-item .p-image {
    width: 200px;
    height: 200px;
  }
  .p-promotionGood .p-item .p-bd {
    width: 300px;
    height: 200px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    margin: auto 0;
    padding: 30px 0;
  }
  .p-promotionGood .p-item .p-bd .p-tag {
    height: 20px;
    line-height: 20px;
    color: #fff!important;
    padding: 0 5px;
    font-size: 12px;
    background-color: #e36844;
  }
  .p-promotionGood .p-item .p-bd .p-name {
    width:270px;
    max-height:52px;
    line-height:26px;
    margin-right:20px;
    font-size:18px;
    font-weight: 500;
    overflow: hidden;
    -webkit-line-clamp: 2;
    margin-top: 16px;
    margin-bottom: 30px;
  }
  .p-promotionGood .p-item .p-bd .p-name:hover {
    color: #b4a078;
  }
  .p-promotionGood .p-item .p-bd .p-price {
    width:300px;
    height: 18px;
    font-size: 18px;
    color:#BE4141;
  }
  .p-promotionGood .p-item .p-bd .p-price .p-ot {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
  }
</style>